<template>
    <div>
        <div class='filter-container'>
            <el-select v-model="listQuery.year" placeholder="年份" clearable>
                <el-option label="2014年" value="2014年"></el-option>
                <el-option label="2015年" value="2015年"></el-option>
                <el-option label="2016年" value="2016年"></el-option>
                <el-option label="2017年" value="2017年"></el-option>
                <el-option label="2018年" value="2018年"></el-option>
                <el-option label="2019年" value="2019年"></el-option>
                <el-option label="2020年" value="2020年"></el-option>
            </el-select>
            <el-select v-model="listQuery.quarter" placeholder="季度" clearable>
                <el-option label="一季度" value="一季度"></el-option>
                <el-option label="二季度" value="二季度"></el-option>
                <el-option label="三季度" value="三季度"></el-option>
                <el-option label="四季度" value="四季度"></el-option>
            </el-select>
            <el-button class='filter-item' type='primary' v-waves icon='search' @click='handleFilter'>搜索</el-button>
            <el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="部门绩效" name="first">
                <div>
                    <el-table :data='list' border style="width: 100%" stripe>
                        <el-table-column label="编号" type="index"> </el-table-column>
                        <el-table-column prop="year" label="年份" width="60">
                        </el-table-column>
                        <el-table-column prop="quarter" label="季度" width="50">
                        </el-table-column>
                        <el-table-column prop="dept" label="部门" width="50">
                        </el-table-column>
                        <el-table-column label="基本考核事项(55%)" align="center">
                            <el-table-column prop="a_jymb" label="A:经营目标(扣分)" width="80">
                            </el-table-column>
                            <el-table-column prop="b_ndjh" label="B:年度计划(扣分)" width="80">
                            </el-table-column>
                            <el-table-column prop="c_zdgz" label="C:重点工作(扣分)" width="80">
                            </el-table-column>
                            <el-table-column prop="a_xxdf" label="a:小项得分(计算方法:(100-A-B-C)*0.55)" width="80">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="专项考核事项(20%)" align="center">
                            <el-table-column prop="d_jfx" label="D:加分项(15%)" width="80">
                            </el-table-column>
                            <el-table-column prop="e_jfx" label="E:减分项(5%;扣分)" width="80">
                            </el-table-column>
                            <el-table-column prop="b_xxdf" label="b:小项得分(计算方法:(5-E+D)" width="80">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="c_znfw" label="c:职能服务满意度事项(10%)" width="100">
                        </el-table-column>
                        <el-table-column prop="d_zfxn" label="d:作风效能考评项(10%)" width="100">
                        </el-table-column>
                        <el-table-column prop="e_qt" label="e:其它(5%;生产中心自查出的问题职能部门进行督促的整改率)" width="100">
                        </el-table-column>
                        <el-table-column prop="f_wjtb" label="f:文件通报" width="80">
                        </el-table-column>
                        <el-table-column prop="total" label="总分(计算方法:a+b+c+d+e-f)" width="100">
                        </el-table-column>
                    </el-table>
                    <div class='pagination-container'>
                        <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page.sync='listQuery.page'
                            :page-sizes='[10,20,30,50]' :page-size='listQuery.limit' layout='total, sizes, prev, pager, next, jumper'
                            :total='total'>
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="中心绩效" name="second">
                <div>
                    <el-table :data='list' style="width: 100%" stripe>
                        <el-table-column label="编号" type="index"> </el-table-column>
                        <el-table-column prop="year" label="年份" width="60">
                        </el-table-column>
                        <el-table-column prop="quarter" label="季度" width="50">
                        </el-table-column>
                        <el-table-column prop="dept" label="中心" width="50">
                        </el-table-column>
                        <el-table-column label="基本考核事项(55%)" align="center">
                            <el-table-column prop="a_jymb" label="A:经营目标(扣分)" width="80">
                            </el-table-column>
                            <el-table-column prop="b_ndjh" label="B:年度计划(扣分)" width="80">
                            </el-table-column>
                            <el-table-column prop="c_zdgz" label="C:重点工作(扣分)" width="80">
                            </el-table-column>
                            <el-table-column prop="a_xxdf" label="a:小项得分(计算方法:(100-A-B-C)*0.55)" width="120">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="专项考核事项(25%)" align="center">
                            <el-table-column prop="d_jfx" label="D:加分项(10%)" width="80">
                            </el-table-column>
                            <el-table-column prop="e_jfx" label="E:减分项(15%;扣分)" width="80">
                            </el-table-column>
                            <el-table-column prop="b_xxdf" label="b:小项得分(计算方法:(15-E+D)" width="80">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="d_zfxn" label="c:作风效能考评项(10%)" width="100">
                        </el-table-column>
                        <el-table-column prop="e_qt" label="d:其它(5%;生产中心自查出的问题职能部门进行督促的整改率)" width="120">
                        </el-table-column>
                        <el-table-column prop="f_wjtb" label="e:文件通报" width="80">
                        </el-table-column>
                        <el-table-column prop="total" label="总分(计算方法:a+b+c+d-e)" width="100">
                        </el-table-column>
                    </el-table>
                    <div class='pagination-container'>
                        <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page.sync='listQuery.page'
                            :page-sizes='[10,20,30,50]' :page-size='listQuery.limit' layout='total, sizes, prev, pager, next, jumper'
                            :total='total'>
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import waves from "@/directive/waves/index.js"; // 水波纹指令
    import { fetchList, create, update, del, check } from "@/api/performance";
    export default {
        directives: {
            waves
        },
        data() {
            return {
                activeName: 'first',
                list: null,
                total: null,
                listQuery: {
                    page: 1,
                    limit: 10,
                    year: "2018年",
                    quarter: "二季度",
                    type: 1,
                    sort: "+id"
                },
            }
        },
        created() {
            this.getList();
        },
        methods: {
            handleClick(tab, event) {
                if (tab.name === "second") {
                    this.listQuery.type = 2
                }
                else {
                    this.listQuery.type = 1
                }
                console.log("this.listQuery", this.listQuery);
                this.listQuery.page = 1;
                this.getList();
                // console.log(tab, event);

            }, handleSizeChange(val) {
                this.listQuery.limit = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.getList();
            },
            getList() {
                this.$store.dispatch("openLoading");
                console.log("this.listQuery.year", this.listQuery.year);
                fetchList(this.listQuery).then(response => {
                    // debugger
                    console.log(response.data);
                    if (response.status === 200 && response.data.code === 2000) {
                        console.log("response.data.items", response.data.items);
                        this.list = response.data.items;
                        this.total = response.data.total;
                    } else {
                        console.log(response);
                        this.$notify({
                            title: "失败1",
                            message: response.status + response.data.msg,
                            type: "error",
                            duration: 200000
                        });
                    }
                    this.$store.dispatch("closeLoading");
                });
            },
            handleFilter() {
                this.listQuery.page = 1;
                this.getList();
            },
            handleDownload() {
                this.downloadLoading = true;
                import("@/vendor/Export2Excel").then(excel => {
                    const tHeader = [
                        "年份",
                        "季度",
                        "部门",
                        "A:经营目标（扣分）",
                        "B:年度计划（扣分）",
                        "C:重点工作（扣分）",
                        "a:小项得分（计算方法：（100-A-B-C)*0.55）",
                        "D:加分项（15%）",
                        "E:减分项（5%；扣分）",
                        "b:小项得分（计算方法：（5-E+D）",
                        "c:职能服务满意度事项（10%）",
                        "d:作风效能考评项（10%）",
                        "e:其它（5%；生产中心自查出的问题职能部门进行督促的整改率）",
                        "f:文件通报",
                        "总分（计算方法：a+b+c+d+e-f）"
                    ];
                    const filterVal = [
                        "year",
                        "quarter",
                        "dept",
                        "a_jymb",
                        "b_ndjh",
                        "c_zdgz",
                        "a_xxdf",
                        "d_jfx",
                        "e_jfx",
                        "b_xxdf",
                        "c_znfw",
                        "d_zfxn",
                        "e_qt",
                        "f_wjtb",
                        "total"
                    ];
                    const data = this.formatJson(filterVal, this.list);
                    excel.export_json_to_excel(tHeader, data, "绩效考核表");
                    this.downloadLoading = false;
                });
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v =>
                    filterVal.map(j => {
                        if (j === "tel") {
                            return "不可下载";
                        } else {
                            return v[j];
                        }
                    })
                );
            }
        }
    }
</script>